import { ReactElement } from 'react';
import { Input } from 'antd-mobile';
import { CloseCircleFilled } from '@ant-design/icons';
import Tag from '../tag';
import './index.less';
import { InbizIcon } from '@inbiz/utils';
import delIcon from '@assets/ic-delete-circle.svg'
type Iprops = {
  selectMode: boolean;
  value: string[] | string;
  readonly: boolean | undefined;
  remove: Function;
  placeholder: string | undefined;
  showField: any;
  saveField?: any;
  type: string | undefined;
  labelDirection: 'top' | 'left';
  open: Function;
};
function EformSelectInput(props: Iprops): ReactElement {
  const {
    selectMode,
    value,
    readonly,
    remove,
    placeholder,
    type,
    saveField,
    showField,
    labelDirection,
    open,
  } = props;
  let showValue: string | string[] = [];
  if (value && value.length > 0) {
    if (type == 'dynamicList') {
      showValue = selectMode
        ? value.map((item: string) => {
          return JSON.parse(item);
        })
        : // 此次如果存储字段值不是唯一的 则单选都会同事选多个 所以判断是否数组
        Array.isArray(value)
          ? [JSON.parse(value[0])]
          : [JSON.parse(value)];
    } else {
      showValue = selectMode
        ? value.map((item: string) => {
          return JSON.parse(item);
        })
        : [JSON.parse(value)];
    }
  }
  return (
    <div
      className={`eformSelectInput ${labelDirection}`}
      onClick={() => {
        open && open();
      }}
    >
      {value && value.length > 0 ?
        selectMode ?
          <>
            <Tag
              showValue={showValue}
              readonly={readonly}
              remove={remove}
              showFiled={showField}
              fieldId={saveField}
              type={type}
              recentValue={value}
            />
            {!readonly && <InbizIcon type="icon-ic-arrow-right-bold" style={{ fontSize: '16px' }} />}
          </>
          :
          <div className='showInput'>
            <span style={{ fontSize: '16px' }}>{showValue?.[0]?.[showField]}</span>
            {!readonly && <div>
              <img src={delIcon} alt="" className='icon' onClick={remove} />
              <InbizIcon type="icon-ic-arrow-right-bold" style={{ fontSize: '16px' }} />
            </div>}

          </div>
        : (
          <div className="addBox">
            <Input type="text" placeholder={!readonly?placeholder:''} readOnly />
            {!readonly&&<div>
              <InbizIcon type="icon-ic-arrow-right-bold" style={{ fontSize: '16px' }} />
            </div>}
          </div>
        )}
    </div>
  );
}
export default EformSelectInput;
